import React, { FC, useCallback, useEffect, useState } from 'react';
import { Select, Input, message, Button, Modal } from 'antd';
import { CardBox } from '../styled';
import { postLoadEquipGet, postLoadEquipSet } from '../api';

const CardBoxs:FC<{
    shuaxin:string
}> = ({
    shuaxin
}) => {
    
    const [formValues, setFormValues] = useState({
        enable: false, // 初始值
        goods: '', // 初始值
        plcHost: '', // 初始值
        plcPort: '', // 初始值
        readLastTime: '', // 固定值
        vehicleRecognitionNo: '', // 初始值
        vehicleRecognitionIp: '', // 初始值
        vehicleRecognitionPort: '', // 初始值
        vehicleRecognitionUser: '', // 初始值
        vehicleRecognitionPassword: '',
        cardNo:'' // 初始值
    });

    const handleChange = (field:any, value:any) => {
        setFormValues(prevValues => ({
            ...prevValues,
            [field]: value
        }));
    };

    const listFun = useCallback(async()=>{
        const  data:any  = (await postLoadEquipGet(
           { channelName:shuaxin}
           )) 
           setFormValues(data)
    },[shuaxin])



    //修改信息 
    const handeleUpdata = ()=>{
        Modal.confirm({
            title: '提示',
            content: '确认要修改装车道配置？',
            onOk: async () => {
                (await postLoadEquipSet({
                    channelName: shuaxin,
                    ...formValues
                }))
                message.success("设置成功")
            },
            onCancel: () => {
                console.log('Cancel')
            },
        })
    }

    useEffect(()=>{
        listFun()
    },[listFun])

    return (
        <CardBox>
        <div className="thClass">
            <div className="thtitle">状态</div>
            <div className="thtitle">煤种</div>
        </div>
        <div className="trClass">
            <div className="trMain">
                <Select
                    style={{ width: '100%' }}
                    placeholder="请选择"
                    variant="borderless"
                    options={[
                        { value: true, label: '开启' },
                        { value: false, label: '关闭' }
                    ]}
                    value={formValues?.enable} // 回显数据
                    onChange={(value) => handleChange('enable', value)}
                />
            </div>
            <div className="trMain">
                <Select
                    style={{ width: '100%' }}
                    placeholder="请选择"
                    variant="borderless"
                    options={[
                        { value: '定制焦', label: '定制焦' },
                        { value: '准一级冶金焦', label: '准一级冶金焦' },
                        { value: '二级冶金焦', label: '二级冶金焦' }
                    ]}
                    value={formValues?.goods} // 回显数据
                    onChange={(value) => handleChange('goods', value)}
                />
            </div>
        </div>
        <div className="thClass">
            <div className="thtitle">PLC主机</div>
            <div className="thtitle">PLC端口</div>
        </div>
        <div className="trClass">
            <div className="trMain">
                <Input
                    placeholder="请输入"
                    variant="borderless"
                    value={formValues?.plcHost} // 回显数据
                    onChange={(e) => handleChange('plcHost', e.target.value)}
                />
            </div>
            <div className="trMain">
                <Input
                    placeholder="请输入"
                    variant="borderless"
                    value={formValues?.plcPort} // 回显数据
                    onChange={(e) => handleChange('plcPort', e.target.value)}
                />
            </div>
        </div>
        <div className="thClass">
            <div className="thtitle" style={{display:'flex',alignItems:'center'}}>
                <div>最近读卡时间</div>
                <Button type="link"style={{marginLeft:'20px'}} onClick={listFun}>刷新</Button>
            </div>
        </div>
        <div className="trClass">
            <div className="trMain">
                {formValues?.readLastTime}
            </div>
        </div>
        <div className="thClass">
            <div className="thtitle">摄像头序列号</div>
            <div className="thtitle">读卡器设备序列号</div>
        </div>
        <div className="trClass">
            <div className="trMain" style={{ width: '100%' }}>
                <Input
                    placeholder="请输入"
                    variant="borderless"
                    value={formValues?.vehicleRecognitionNo} // 回显数据
                    onChange={(e) => handleChange('vehicleRecognitionNo', e.target.value)}
                />
            </div>
            <div className="trMain" style={{ width: '100%' }}>
                <Input
                    placeholder="请输入"
                    variant="borderless"
                    value={formValues?.cardNo} // 回显数据
                    onChange={(e) => handleChange('cardNo', e.target.value)}
                />
            </div>
        </div>
        <div className="thClass">
            <div className="thtitle">摄像头主机</div>
            <div className="thtitle">摄像头端口</div>
        </div>
        <div className="trClass">
            <div className="trMain">
                <Input
                    placeholder="请输入"
                    variant="borderless"
                    value={formValues?.vehicleRecognitionIp} // 回显数据
                    onChange={(e) => handleChange('vehicleRecognitionIp', e.target.value)}
                />
            </div>
            <div className="trMain">
                <Input
                    placeholder="请输入"
                    variant="borderless"
                    value={formValues?.vehicleRecognitionPort} // 回显数据
                    onChange={(e) => handleChange('vehicleRecognitionPort', e.target.value)}
                />
            </div>
        </div>
        <div className="thClass">
            <div className="thtitle">摄像头用户名</div>
            <div className="thtitle">摄像头密码</div>
        </div>
        <div className="trClass">
            <div className="trMain">
                <Input
                    placeholder="请输入"
                    variant="borderless"
                    value={formValues?.vehicleRecognitionUser} // 回显数据
                    onChange={(e) => handleChange('vehicleRecognitionUser', e.target.value)}
                />
            </div>
            <div className="trMain">
                <Input
                    placeholder="请输入"
                    variant="borderless"
                    value={formValues?.vehicleRecognitionPassword} // 回显数据
                    onChange={(e) => handleChange('vehicleRecognitionPassword', e.target.value)}
                />
            </div>
        </div>
        <div style={{textAlign:'right'}}>
            <Button onClick={handeleUpdata} type="primary" style={{marginTop:'10px'}}>修改信息</Button>
        </div>
    </CardBox>
    );
};

export default CardBoxs;
